js原生 base64 编码解码

您所在的位置:网站首页 jquery encode方法 js原生 base64 编码解码

js原生 base64 编码解码

#js原生 base64 编码解码| 来源: 网络整理| 查看: 265

前言

有时候项目页面需要插入接口返回的html,都知道html可能会有img和文字或许还有些中文字符,以及各种html标签和换行等等,这就导致如果直接用字符串将那一串html返回给前端,页面会乱码的情况,这个时候,或许我们就会用到base64编码啦,给大家分享一个js原生的base64编码解码的方法,就不用再去引库,简单明了方便。

原生 atob 和 btoa方法

从IE10+浏览器开始,所有浏览器就原生提供了Base64编码解码方法,不仅可以用于浏览器环境,Service Worker环境也可以使用。

方法名就是atob和btoa,具体语法如下:

1.base64 解码

浏览器中 var decodedData = window.atob(encodedData) 复制代码 例如: window.atob('OTg5ODk5'); // 返回解码 '989899' 复制代码

2.base64 编码

浏览器中 var decodedData = window.btoa(stringToEncode) 复制代码 例如: window.btoa('989899'); // 返回编码 'OTg5ODk5' 复制代码

base64-1.png

中文报错问题 (优化)

上述例子是用的数字,没有出现任何问题,但是当我对中文进行编码的时候,出现了报错问题,报错如下:

base64-2.png

解决一下这个报错问题(思路是先编码,再解码) window.btoa(window.encodeURIComponent('代代')); //返回编码 'JUU0JUJCJUEzJUU0JUJCJUEz' window.decodeURIComponent(window.atob('JUU0JUJCJUEzJUU0JUJCJUEz')); //返回解码 '代代' 复制代码

base64-3.png

encodeURIComponent()方法可以对 URI 进行编码 decodeURIComponent()函数可对 encodeURIComponent()函数编码的 URI 进行解码。 小结

btoa和 atob 这两个方法名怎么好理解呢,就是b to a 和 a to b,普通字符转base64 就是编码,就是b to a ,用window.btoa(),要记住b不是base64,a 是base64,要记得得反过来记,所以base64转普通字符 就是解码,就是a to b,用window.atob。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3